<template>
  <div id="app">
    <div :class="personInfoClass">
      <el-header :class="{
        'chooseVisabled':(isActive==='toHome' || isActive==='toAdmin' || isActive==='toBsHome' || path.startsWith('/BsHome'))
        }">
        <div class="sidebar">
          <i class="iconfont icon-cebianlan" :class="iconfontVisibility()" @click="showSidebar()"></i>
          <i class="el-icon-close closeBtn" :class="closeBtnVisibility()" @click="showCloseBtn()"></i>
          <div :class="sidebar_menu_display()">
            <div class="headporit"></div>
            <ul class="sidebar_tag">
              <li @click="toHome" :class="{'choose2':isActive.substr(0,6)=='toHome'}">首页</li>
              <li @click="toBlog" :class="{'choose2':isActive.substr(0,6)=='toBlog'}">博客</li>
              <li @click="toCategory" :class="{'choose2':isActive.substr(0,10)=='toCategory'}">分类</li>
              <li @click="toTimeLine" :class="{'choose2':isActive.substr(0,10)=='toTimeLine'}">时间线</li>
              <li @click="toAbout" :class="{'choose2':isActive.substr(0,7)=='toAbout'}">关于</li>
            </ul>
          </div>
        </div>
        <div class="name" @click="toBackstage">Kpods</div>
        <div class="tab">
          <ul>
            <li @click="toHome" :class="{'choose':isActive.substr(0,6)=='toHome'}"><i class="iconfont icon-zhuye"></i>首页
            </li>
            <li @click="toBlog" :class="{'choose':isActive.substr(0,6)=='toBlog'}"><i
                class="iconfont icon-wenzhang-copy"></i>博客
            </li>
            <li @click="toCategory" :class="{'choose':isActive.substr(0,10)=='toCategory'}"><i
                class="iconfont icon-fenlei"></i>分类
            </li>
            <li @click="toTimeLine" :class="{'choose':isActive.substr(0,10)=='toTimeLine'}"><i
                class="iconfont icon-jilu"></i>时间线
            </li>
            <li @click="toAbout" :class="{'choose':isActive.substr(0,7)=='toAbout'}"><i
                class="iconfont icon-guanyuwo"></i>关于
            </li>
          </ul>
        </div>
        <div class="search" @click="centerDialogVisible = true" :class="{searchIsVisable:isVisable}">
          <i class="el-icon-search"></i>
        </div>
      </el-header>
    </div>
    <el-dialog title="搜索" :visible.sync="centerDialogVisible" width="30%" center @close="closeDiag">
      <el-input placeholder="请输入内容" v-model="searchInput" clearable>
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="searchCancle">取 消</el-button>
        <el-button type="primary" @click="searchConfirm">确 定</el-button>
      </span>
    </el-dialog>
    <router-view @changeIsActive="changeIsActive"></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: 'to' + this.$route.name,
      searchInput: '',
      centerDialogVisible: false,
      isVisable: false,
      path: this.$route.path,
      // 窗口宽度
      windowWidth: document.documentElement.clientWidth,
      // 左侧菜单栏是否显示的flag
      sidebarFlag: false
    }
  },
  watch: {
    $route: 'routerChange',
    // 监听屏幕宽度
    '$store.state.screenWidth': function(val) { // 监听屏幕宽度变化
      this.windowWidth = val
    }
  },
  computed: {
    // 判断屏幕宽度
    personInfoClass() {
      if (this.windowWidth >= 1080) {
        return 'PC_layout'
      } else if (this.windowWidth < 1080 && this.windowWidth >= 812) {
        return 'middle_layout'
      } else {
        return 'mobile_layout'
      }
    }
  },
  mounted() {
    const that = this
    window.onresize = () => {
      that.$store.state.screenWidth = document.documentElement.clientWidth // 窗口宽度
    }
  },
  methods: {
    toHome() {
      this.isActive = 'toHome'
      this.$router.push('/')
      this.sidebarFlag = false
    },
    toBlog() {
      this.isActive = 'toBlog'
      this.$router.push('/Blog')
      this.$store.state.inputContent = ''
      this.isVisable = false
      this.sidebarFlag = false
    },
    toCategory() {
      this.isActive = 'toCategory'
      this.$router.push('/Category')
      this.isVisable = true
      this.sidebarFlag = false
    },
    toTimeLine() {
      this.isActive = 'toTimeLine'
      this.$router.push('/TimeLine')
      this.isVisable = true
      this.sidebarFlag = false
    },
    toAbout() {
      this.isActive = 'toAbout'
      this.$router.push('/About')
      this.isVisable = true
      this.sidebarFlag = false
    },
    // 前往后台
    toBackstage() {
      this.$router.push('/Admin')
    },
    changeIsActive(params) {
      this.isActive = params
    },
    // 将搜索对话框的内容传给inputContent
    searchConfirm() {
      this.centerDialogVisible = false
      this.$store.state.inputContent = this.searchInput
      this.searchInput = ''
    },
    searchCancle() {
      this.centerDialogVisible = false
      this.searchInput = ''
    },
    closeDiag() {
      this.searchInput = ''
    },
    routerChange(to, from) {
      if (from.path === '/Admin' || to.path === '/Admin' || from.path.startsWith('/BsHome') || to.path.startsWith('/BsHome')) {
        this.$router.go(0)
      }
    },
    // 左侧栏显示与否
    sidebar_menu_display() {
      if (this.sidebarFlag) {
        return 'sidebar_menu'
      } else {
        return 'sidebar_menu_visibility'
      }
    },
    // 点击按钮展示左侧
    showSidebar() {
      this.sidebarFlag = !this.sidebarFlag
    },
    // 左侧栏按钮隐藏与显示
    iconfontVisibility() {
      if (this.sidebarFlag) {
        return 'iconfont_hidden'
      } else {
        return ''
      }
    },
    // 左侧栏关闭按钮显示与否
    showCloseBtn() {
      this.sidebarFlag = !this.sidebarFlag
    },
    closeBtnVisibility() {
      if (this.sidebarFlag) {
        return ''
      } else {
        return 'closeBtn_hidden'
      }
    }
  }
}
</script>

<style lang="less" scoped>
#app {
  height: 100%;
  width: 100%;
}
.PC_layout {
  .el-header {
    width: 100%;
    position: fixed;
    padding: 0 250px;
    background-color: #24283b;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
    z-index: 999;
    .sidebar {
      visibility: hidden;
    }
    .name {
      font-size: 24px;
      font-weight: bold;
      color: #fff;
      cursor: pointer;
    }
    .tab {
      ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 500px;
        color: #fff;
        li {
          cursor: pointer;
          height: 45px;
          line-height: 45px;
          margin-top: 7.5px;
          padding-right: 10px;
          padding-left: 10px;
          i {
            margin-right: 5px;
          }
        }
      }
    }
    .search {
      float: right;
      color: #fff;
      font-size: 20px;
      cursor: pointer;
    }
  }
  .choose {
    background-color: #fff;
    color: rgb(0, 162, 255);
    border-radius: 3px;
  }
  .chooseVisabled {
    visibility: hidden;
  }
  .searchIsVisable {
    visibility: hidden;
  }
}
.middle_layout {
  .el-header {
    width: 100%;
    position: fixed;
    // padding: 0 250px;
    background-color: #24283b;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
    z-index: 999;
    .sidebar {
      color: #fff;
      cursor: pointer;
      display: none;
      .iconfont {
        opacity: 1;
        font-size: 20px;
        transition: opacity 0.5s ease 0.25s;
      }
      .closeBtn {
        font-size: 24px;
        position: absolute;
        top: 50%;
        left: 235px;
        transform: translateY(-50%);
        transition: left 0.5s ease;
      }
      .closeBtn_hidden {
        font-size: 24px;
        position: absolute;
        top: 50%;
        left: -24px;
        transform: translateY(-50%);
        transition: left 0.5s ease;
      }
      .iconfont_hidden {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease;
      }
      .sidebar_menu {
        width: 270px;
        height: 694px;
        background-color: rgba(36, 40, 59, 1);
        position: absolute;
        top: 60px;
        left: 0;
        transition: left 0.5s ease;
        .headporit {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          background-image: url("./assets/portrait.png");
          background-size: 100% 100%;
          margin: 50px auto 0;
        }
        .sidebar_tag {
          text-align: center;
          margin-top: 30px;
        }
      }
      .sidebar_menu_visibility {
        width: 270px;
        height: 694px;
        background-color: rgba(36, 40, 59, 1);
        position: absolute;
        top: 60px;
        left: -270px;
        transition: left 0.5s ease;
        .headporit {
          visibility: hidden;
        }
        .sidebar_tag {
          visibility: hidden;
          li {
            visibility: hidden;
          }
        }
      }
    }
    .name {
      font-size: 24px;
      font-weight: bold;
      color: #fff;
      // margin: 0 auto;
    }
    .tab {
      display: none;
    }
    .search {
      float: right;
      color: #fff;
      font-size: 20px;
      cursor: pointer;
    }
  }
  .choose {
    background-color: #fff;
    color: rgb(0, 162, 255);
    border-radius: 3px;
  }
  .choose2 {
    background-color: #fff;
    color: rgb(0, 162, 255);
  }
  .chooseVisabled {
    visibility: hidden;
  }
  .searchIsVisable {
    visibility: hidden;
  }
}
.mobile_layout {
  .el-header {
    width: 100%;
    position: fixed;
    // padding: 0 250px;
    background-color: #24283b;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
    z-index: 999;
    .sidebar {
      color: #fff;
      cursor: pointer;
      .iconfont {
        opacity: 1;
        font-size: 20px;
        transition: opacity 0.5s ease 0.25s;
      }
      .closeBtn {
        font-size: 24px;
        position: absolute;
        top: 50%;
        left: 18px;
        transform: translateY(-50%);
        transition: left 0.5s ease;
      }
      .closeBtn_hidden {
        font-size: 24px;
        position: absolute;
        top: 50%;
        left: -24px;
        transform: translateY(-50%);
        transition: left 0.5s ease;
      }
      .iconfont_hidden {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease;
      }
      .sidebar_menu {
        width: 270px;
        height: 694px;
        background-color: rgba(36, 40, 59, 1);
        position: absolute;
        top: 60px;
        left: 0;
        transition: left 0.5s ease;
        .headporit {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          background-image: url("./assets/portrait.png");
          background-size: 100% 100%;
          margin: 50px auto 0;
        }
        .sidebar_tag {
          text-align: center;
          margin-top: 30px;
        }
      }
      .sidebar_menu_visibility {
        width: 270px;
        height: 694px;
        background-color: rgba(36, 40, 59, 1);
        position: absolute;
        top: 60px;
        left: -270px;
        transition: left 0.5s ease;
        .headporit {
          visibility: hidden;
        }
        .sidebar_tag {
          visibility: hidden;
          li {
            visibility: hidden;
          }
        }
      }
    }
    .name {
      font-size: 24px;
      font-weight: bold;
      color: #fff;
      // margin: 0 auto;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    .tab {
      display: none;
    }
    .search {
      float: right;
      color: #fff;
      font-size: 20px;
      cursor: pointer;
    }
  }
  .choose {
    background-color: #fff;
    color: rgb(0, 162, 255);
    border-radius: 3px;
  }
  .choose2 {
    background-color: #fff;
    color: rgb(0, 162, 255);
  }
  .chooseVisabled {
    visibility: hidden;
  }
  .searchIsVisable {
    visibility: hidden;
  }
}
/deep/.el-dialog {
  min-width: 300px;
  min-height: 220px;
}
</style>
